<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>WebSocket 测试</title>
</head>
<body>
    <h1>WebSocket 连接测试</h1>
    <div id="status">状态: 未连接</div>
    <div id="messages"></div>

    <script>
        const ws = new WebSocket('ws://localhost:8080/ws?username=测试用户&userId=test123');
        const statusEl = document.getElementById('status');
        const messagesEl = document.getElementById('messages');

        ws.onopen = () => {
            console.log('=== WebSocket 连接成功 ===');
            statusEl.textContent = '状态: 已连接';
            statusEl.style.color = 'green';
        };

        ws.onmessage = (event) => {
            console.log('=== 收到原始消息 ===');
            console.log('原始数据:', event.data);

            try {
                const data = JSON.parse(event.data);
                console.log('解析后的数据:', data);

                const div = document.createElement('div');
                div.style.margin = '10px';
                div.style.padding = '10px';
                div.style.border = '1px solid #ccc';
                div.innerHTML = `
                    <strong>消息类型:</strong> ${data.type}<br>
                    <strong>完整数据:</strong> <pre>${JSON.stringify(data, null, 2)}</pre>
                `;
                messagesEl.appendChild(div);
            } catch (err) {
                console.error('解析消息失败:', err);
            }
        };

        ws.onerror = (error) => {
            console.error('=== WebSocket 错误 ===', error);
            statusEl.textContent = '状态: 错误';
            statusEl.style.color = 'red';
        };

        ws.onclose = () => {
            console.log('=== WebSocket 连接关闭 ===');
            statusEl.textContent = '状态: 已断开';
            statusEl.style.color = 'gray';
        };
    </script>
</body>
</html>
